<template>
  <el-dialog
    class="add-session-dialog"
    :visible="showModal"
    :before-close="closeDialog"
    :close-on-click-modal="false"
    width="30%"
  >
  <div slot="title" class="dialog-header">
    <span> 添加到自定义组 </span>
  </div>
    <el-form ref="increaseForm" :model="increaseForm" label-position="right" label-width="120px" :rules="formRules" :inline="true">
      <el-row>
        <el-col :span="22" class="add-user-form-left">
          <el-form-item label="选择自定义组" prop="group_id">
            <el-select v-model="increaseForm.group_id" placeholder="请选择">
              <el-option
                v-for="item in customGroups"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="案例数量">
            <span>{{ selectNum }}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click.native="closeDialog">关闭</el-button>
      <el-button
        type="primary"
        @click.native="handleSubmit"
      >提交</el-button>
    </div>
  </el-dialog>
</template>
<script>
  export default {
    data(){
      return {
        // 新增界面数据
        increaseForm: {
          group_id: ''
        },
        // 新增规则
        formRules: {
          group_id: [
            { required: true, message: '请选择组', trigger: 'blur' }
          ]
        },
      }
    },
    props: {
      customGroups: Array,
      selectNum: Number,
      showModal: Boolean
    },
    methods: {
      closeDialog(){
        this.$refs['increaseForm'].resetFields()
        this.$emit('closeDialog')
      },
      handleSubmit(){
        this.$refs.increaseForm.validate((valid) => {
          if (valid) {
            this.$emit('handleDialogSubmit', this.increaseForm.group_id)
          }
        })
        
      }
    }
  }
</script>
<style lang="scss" scoped>
@import '@/styles/vars.scss';
.add-session-dialog {
    ::v-deep .el-dialog__header {
      padding: 15px 20px;
      background: rgb(242, 243, 248);
      .el-dialog__title{
        padding-left: 10px;
        border-left: 2px solid $primary-color;
        line-height: 24px;
        font-size: 16px;
        color: #303133;
      }
      .el-dialog__headerbtn {
        top: 14px;
        .el-dialog__close {
          color: #303133;
        }
      }
    }
    ::v-deep .el-dialog__body{
      padding: 20px 20px;
      .title{
        margin-bottom: 20px;
        font-size: 16px;
      }
    }
    ::v-deep .el-dialog__footer {
      text-align: center;
    }
  }

</style>